<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="head.jsp"%>

<%
	String id = request.getParameter("id");
	id = id == null ? "create" : id;
%>

<div class="am-cf admin-main">
	<!-- content start -->
	<input type="hidden" id='projectId' value="<%=id%>">
	<div class="admin-content">
		<div class="admin-content-body">
			<div class="am-cf am-padding am-padding-bottom-0">
				<div class="am-fl am-cf">
					<strong class="am-text-primary am-text-lg">构建项目</strong> / <small>项目参数</small>
				</div>
			</div>
			<hr>


			<div class="am-g">
			<div class="am-form-group am-fr">
							<button type="button" id="id_project_back"
									class="am-btn am-btn-primary">上一步</button>
								<button type="button" id="id_project_save"
									class="am-btn am-btn-primary">保存修改</button>
								<button type="button" id="id_project_next"
									class="am-btn am-btn-primary">下一步</button>
							</div>
							
				<div class="am-u-sm-12">
					<form class="am-form">
						<table class="am-table am-table-striped am-table-hover table-main">
							<thead>
								<tr>
									<th class="table-title">key</th>
									<th class="table-title">value</th>
									<th class="table-author table-id am-hide-sm-only">操作</th>
								</tr>
							</thead>
							<tbody id="id_tb_body">
							</tbody>
						</table>
						<hr>
					</form>
				</div>
			</div>

			<div class="am-g">
				<div class="am-u-sm-12">
					<form class="am-form am-form-horizontal" id="id_from"
						data-am-validator>
						<fieldset>
							<input type="hidden" id="id_id" value="<%=id%>">
							<div class="am-form-group">
								<label for="dbName" class="am-u-sm-3 am-form-label">key</label>
								<div class="am-u-sm-9">
									<input type="text" id="key" required name="key" value=""
										placeholder="key">
								</div>
							</div>
							<div class="am-form-group">
								<label for="driver" class="am-u-sm-3 am-form-label">value</label>
								<div class="am-u-sm-9">
									<input type="text" id="value" required name="value" value=""
										placeholder="value">
								</div>
							</div>
							<br />
							
						</fieldset>
					</form>
				</div>
			</div>

		</div>
	</div>
</div>



<script type="text/javascript">
	var metadata = [ 'key', 'value' ];
	var projectId = $("#projectId").val();
	$(function() {
		loadData();
		$("#id_project_save").on('click', function() {
			save();
		});
		$("#id_project_next").on('click', function() {
			window.location.href = "tables.jsp?id=" + projectId;
		});
		$("#id_project_back").on('click', function() {
			window.location.href = "project.jsp?id=" + projectId;
		});
		
	});

	function loadData() {
		$.get("mvc/config/list?id=" + projectId, function(data) {
			filltr(data);
		});
	}
	
	
	
	function filltr(data) {
		data = data || [];
		$("#id_tb_body").html("");
		for ( var idx in data) {
			var context = "";
			var prj = data[idx];
			for ( var midx in metadata) {
				var key = metadata[midx];
				context += "<td>" + prj[key] + "</td>";
			}

			context += "<td>"
					+ '<a class="am-btn am-btn-default am-btn-xs am-hide-sm-only"  href="javascript:deleteprj('
					+ prj['id']
					+ ')"><span class="am-icon-trash-o"></span>删除</a>'
					+ "</td>";

			context += "<td></td>";
			context = "<tr>" + context + "</tr>";

			$("#id_tb_body").append(context);
		}
	}

	
	
	function filltr(data) {
		data = data || [];
		$("#id_tb_body").html("");
		for ( var idx in data) {
			var context = "";
			var prj = data[idx];
			for ( var midx in metadata) {
				var key = metadata[midx];
				context += "<td>" + prj[key] + "</td>";
			}

			context += "<td>"
					+ '<a class="am-btn am-btn-default am-btn-xs am-hide-sm-only"  href="javascript:deleteprj('
					+ prj['id']
					+ ')"><span class="am-icon-trash-o"></span>删除</a>'
					+ "</td>";

			context += "<td></td>";
			context = "<tr>" + context + "</tr>";

			$("#id_tb_body").append(context);
		}
	}

	function deleteprj(id) {
		$.get("mvc/config/delete?id=" + id, function(msg) {
			alert(msg);
			loadData();
		});
	}

	function save() {
		var isVal = $('#id_from').validator('isFormValid');
		if (!!isVal) {
			var obj = {
				'key' : $("#key").val(),
				'value' : $("#value").val(),
				'projectId' : $("#projectId").val()
			};
			$.post("mvc/config/add", obj, function() {
				alert("添加成功");
				$('#id_from')[0].reset();
				loadData();
			});
		}
	}
</script>

<%@include file="bottom.jsp"%>